<template>
    <div class="setoverview">
         <div class="set_title">设备名称
                <el-input v-model="setData.name"  prefix-icon="el-icon-edit" @change="changeName($event)" maxlength="30"></el-input>
        </div> 
        <div class="set_wai">
            <div class="set_flex">
                <div class="set_flex_item" v-for="(item,index) in this.setData.unit" :key="index">
                    <div class="set_flex_item_top">
                        <el-switch
                            @change="changeValue(index, item, 'ready')"
                            v-model="item.ready"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                        <div style="color: #e5e5e5;">
                            id 编号 : {{ item.id }}
                        </div>
                        <el-button  size="mini" class="set_flex_item_set" @click="openSet(item,index)">设置</el-button>
                    </div>
                    <div class="set_flex_item_flex trans_input trans_one">
                        <div class="deviceset_title">名称：</div>
                        <el-input v-model="item.name" @change="changeValue(index, item, 'name')" maxlength="10"></el-input>
                    </div>
                    <div class="set_flex_item_flex trans_input trans_two">
                        <div class="set_flex_item_flex2">
                            <div class="deviceset_title3">保存时间(s):</div>
                            <el-input v-model="item.recordtime" @change="changeValue(index, item, 'recordtime')" maxlength="10"></el-input>
                        </div>
                        <div class="set_flex_item_flex2">
                            <div class="deviceset_title2">单位:</div>
                            <el-input v-model="item.flag" @change="changeValue(index, item, 'flag')" maxlength="10"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <el-dialog
            :visible.sync="overviewSet"
            :append-to-body="true"
            :modal="true"
            @closed="overviewSetClose"
            width="70%"> -->
        <div v-if="overviewSet" class="edit_tan">
            <div class="config_set">
                <el-form :model="overviewData">
                    <div class="oversetdiv">
                        <div class="oversetdiv_top">
                            <div class="oversetdiv_title">
                                <div class="oversetdiv_title_ti">
                                    <i class="el-icon-s-data"></i>
                                    基本参数
                                </div>
                                
                            </div>
                            <div class="oversetdiv_top_nr">
                                <div class="set_flex_item_flex trans_input">
                                    <div class="set_flex_item_flex3">
                                        <div class="deviceset_title4">最小值：</div>
                                        <el-input v-model="overviewData.min" maxlength="10"></el-input>
                                    </div>
                                    <div class="set_flex_item_flex3">
                                        <div class="deviceset_title4">最大值：</div>
                                        <el-input v-model="overviewData.max" maxlength="10"></el-input>
                                    </div>
                                    <div class="set_flex_item_flex3">
                                        <div class="deviceset_title4">倍率：</div>
                                        <el-input v-model="overviewData.mult" maxlength="10"></el-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="oversetdiv_warn">
                            <div class="oversetdiv_title">
                                <div class="oversetdiv_title_ti">
                                    <i class="el-icon-bell"></i>
                                    报警参数
                                </div>
                            </div>
                            <div class="oversetdiv_top_nr oversetdiv_top_nr_warn">
                                <div class="oversetdiv_warn_hl">
                                    <div class="oversetdiv_warn_hl_echarts1"> 
                                        <!-- 开启停用按钮 -->
                                        <div class="oversetdiv_warn_hl_item">
                                                <el-switch
                                                    v-model="overviewData.alarmhighenable"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949"
                                                    @change="alarmChangeh">
                                                </el-switch>
                                            </div>
                                        <div class="oversetdiv_warn_hl_item">
                                            <el-switch
                                                v-model="overviewData.alarmlowenable"
                                                active-color="#13ce66"
                                                inactive-color="#ff4949"
                                                @change="alarmChangel">
                                            </el-switch>
                                        </div>
                                    </div>
                                    <div class="oversetdiv_warn_hl_echarts3">
                                        <div class="oversetdiv_warn_hl_item" style="margin-right: 0px;">
                                            <div class="oversetdiv_warn_flex trans_input min_input" style="margin-bottom: 10px;">
                                                <div class="deviceset_title5">高点触发：</div>
                                                <el-input v-model="overviewData.alarmhhvalue" maxlength="10"></el-input>
                                            </div>
                                            <div class="oversetdiv_warn_flex trans_input min_input">
                                                <div class="deviceset_title5">高点恢复：</div>
                                                <el-input v-model="overviewData.alarmhvalue" maxlength="10"></el-input>
                                            </div>
                                        </div>
                                        <div class="oversetdiv_warn_hl_item" style="margin-right: 0px;">
                                            <div class="oversetdiv_warn_flex trans_input min_input" style="margin-bottom: 10px;">
                                                <div class="deviceset_title5">低点恢复：</div>
                                                <el-input v-model="overviewData.alarmlvalue" maxlength="10"></el-input>
                                            </div>
                                            <div class="oversetdiv_warn_flex trans_input min_input">
                                                <div class="deviceset_title5">低点触发：</div>
                                                <el-input v-model="overviewData.alarmllvalue" maxlength="10"></el-input>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="oversetdiv_warn_hl_echarts2">
                                        <img src="../../assets/echarts.png" alt="">
                                    </div>
                                    <div class="oversetdiv_warn_hl_echarts2 oversetdiv_warn_name">
                                        <div>
                                            <div class="deviceset_title6">高限报警名称</div>
                                            <div class="trans_input min_input2">
                                                <el-input v-model="overviewData.alarmhighname" maxlength="10"></el-input>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="deviceset_title6">低限报警名称</div>
                                            <div class="trans_input min_input2">
                                                <el-input v-model="overviewData.alarmlowname" maxlength="10"></el-input>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tuozhan" @click="tuozhan()">
                                    <span style="color:#ffffff36">--------------------------------</span>
                                    <span>高级报警设置</span>
                                    <i class="el-icon-caret-bottom"></i>
                                    <span style="color:#ffffff36">--------------------------------</span>
                                </div>
                                <div class="trans_input set_flex_item_warnjiben" :style="tuozhanShow ? 'opacity:1':'opacity:0'">
                                    <div class="set_flex_item_flex4">
                                        <div class="deviceset_title7">有效时间段：</div>
                                        <el-select v-model="overviewData.alarmareatimename" @change="timeChange" placeholder="请选择">
                                            <el-option
                                                v-for="item in timeList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <i @click="tishi2" class=" set_fitem_tishi_icon el-icon-question"></i>
                                        <!-- <span class="set_fitem_tishi">*指定时间内报警信息有效，该项是从高级设置中选择配置好的时间组，在该时间组范围内开启报警功能</span> -->
                                    </div>
                                    <div class="set_flex_item_flex4">
                                        <div class="deviceset_title7">报警等级：</div>
                                        <el-select v-model="overviewData.alarmlimit" placeholder="请选择">
                                            <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <i @click="tishi3" class=" set_fitem_tishi_icon el-icon-question"></i>
                                        <!-- <span class="set_fitem_tishi">*1-9级报警等级依次提高，报警用户只能接收到同等级及以上等级的报警信息</span> -->
                                    </div>
                                    <div class="set_flex_item_flex4" style="width: 250px;">
                                        <div class="deviceset_title7">延迟时间(s)：</div>
                                        <input class="deviceset_input" v-model="overviewData.alarmdelay" type="number" min="0" @blur="numBlur"  @input="validateInput" />
                                    </div>
                                    <div class="set_flex_item_flex4">
                                        <div class="deviceset_title7">报警保持：</div>
                                        <el-switch
                                            v-model="overviewData.alarmrecover"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949">
                                        </el-switch>
                                        <i @click="tishi1" class=" set_fitem_tishi_icon el-icon-question"></i>
                                        <!-- <span class="set_fitem_tishi">*产生报警后的报警状态，需要在报警列表中手动清除</span> -->
                                    </div>
                                </div>
                                <!-- <div class="trans_input set_flex_item_warntime">
                                    <div class="set_flex_item_flex4">
                                        <div class="deviceset_title7">报警时间区间：</div>
                                        <p class="warntimep">
                                            <span v-if="this.endTime1 == ''">全天</span>
                                            <span v-if="this.endTime1 != ''">[{{ this.startTime1 +' - '+ this.endTime1 }}] &nbsp;&nbsp;&nbsp;</span>
                                            <span v-if="this.endTime2 != ''">[{{ this.startTime2 +' - '+ this.endTime2 }}] &nbsp;&nbsp;&nbsp;</span>
                                            <span v-if="this.endTime3 != ''">[{{ this.startTime3 +' - '+ this.endTime3 }}] </span>
                                        </p>
                                        <el-button class="set_time" @click="getTime()">设置</el-button>
                                    </div>
                                </div> -->
                                <div class="setover_but">
                                    <el-button @click="overviewSet = false">取 消</el-button>
                                    <el-button type="primary" @click="changeSave()">确 定</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="setover_but">
                        <el-button @click="overviewSet = false">取 消</el-button>
                        <el-button type="primary" @click="changeSave()">确 定</el-button>
                    </div> -->
                </el-form>
        <!-- </el-dialog> -->
            </div>
        </div>
        <!-- 删除弹框 -->
        <div v-if="dialogTime" class="edit_tan">
            <div class="config_delete">
                <!-- <div class="edit_close" @click="colseTime()">X</div> -->
                <div class="edit_title">
                    报警时间区间设置
                </div>
                <div class="config_delete_flex">
                    <div class="set_flex_item_flex5">
                        <div class="deviceset_title7">报警时间区间1：</div>
                        <div class="overview_settime">
                            <el-time-select
                                placeholder="起始时间"
                                v-model="startTime1"
                                @focus="forbid"
                                :editable="false"
                                :popper-append-to-body='false'
                                popper-class ="xiala"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00'
                                    }"
                                @change="changeTime($event,0)"
                                ></el-time-select>
                                <el-time-select
                                placeholder="结束时间"
                                v-model="endTime1"
                                @focus="forbid"
                                :editable="false"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                    minTime: startTime1
                                }"
                                @change="changeTime($event,1)"
                            ></el-time-select>
                        </div>
                    </div>
                    <div class="set_flex_item_flex5">
                        <div class="deviceset_title7">报警时间区间2：</div>
                        <div class="overview_settime">
                            <el-time-select
                                placeholder="起始时间"
                                v-model="startTime2"
                                @focus="forbid"
                                :editable="false"
                                :popper-append-to-body='false'
                                popper-class ="xiala"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                    minTime: endTime1
                                    }"
                                @change="changeTime($event,2)"
                                ></el-time-select>
                                <el-time-select
                                placeholder="结束时间"
                                v-model="endTime2"
                                @focus="forbid"
                                :editable="false"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                    minTime: startTime2
                                }"
                                @change="changeTime($event,3)"
                            ></el-time-select>
                        </div>
                    </div>
                    <div class="set_flex_item_flex5">
                        <div class="deviceset_title7">报警时间区间3：</div>
                        <div class="overview_settime">
                            <el-time-select
                                placeholder="起始时间"
                                v-model="startTime3"
                                @focus="forbid"
                                :editable="false"
                                :popper-append-to-body='false'
                                popper-class ="xiala"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                    minTime: endTime2
                                    }"
                                @change="changeTime($event,4)"
                                ></el-time-select>
                                <el-time-select
                                placeholder="结束时间"
                                v-model="endTime3"
                                @focus="forbid"
                                :editable="false"
                                :picker-options="{
                                    start: '00:00',
                                    step: '00:15',
                                    end: '24:00',
                                    minTime: startTime3
                                }"
                                @change="changeTime($event,5)"
                            ></el-time-select>
                        </div>
                    </div>
                </div>
                <div class="edit_but">
                    <!-- <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="colseTime()">
                        <span>取消</span>
                    </el-button> -->
                    <el-button type="primary"  style="margin-right: 20px;width: 110px; padding: 12px 5px;" @click="editTime()">
                        <span>确定</span>
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
export default {
    props:['msg', 'type'],
    data () {
        return {
            baseData:[],//基础数据（uid,addr,type）
            setData:[],// 列表数据
            overviewSet:false,
            overviewData:{},
            overviewIndex:0,
            sizenum:0,//时间计数
            repnum:3,//重复时间秒
            repeatnum:0,//失败访问次数
            name: '',
            tuozhanShow:false,//显示高级设置
            options: [{
                value: '1',
                label: '1'
                }, {
                value: '2',
                label: '2'
                }, {
                value: '3',
                label: '3'
                }, {
                value: '4',
                label: '4'
                }, {
                value: '5',
                label: '5'
                }, {
                value: '6',
                label: '6'
                }, {
                value: '7',
                label: '7'
                }, {
                value: '8',
                label: '8'
                }, {
                value: '9',
                label: '9'
            }],
            timeList:[],
            timeErroData:'',
            timeGetData:'',//接口方法的定时器
            dialogTime:false,
            dayArr: ['','','','','',''],
            chooseDay:[],
            alarmTime:'',
            startTime1: "",
            endTime1: "",
            startTime2: "",
            endTime2: "",
            startTime3: "",
            endTime3: "",
        }
    },
    created () {
        this.$nextTick(()=> {
            this.getLayout8()
            this.getData()    
        })
    },
    computed: {
    },
    methods: {
        // 打开时间弹框
        getTime(){
            this.dialogTime = true
        },
        // 关闭时间弹框
        // colseTime(){
        //     this.dialogTime = false
        // },
        //禁止软键盘弹出
        forbid(){
            //禁止软键盘弹出
            document.activeElement.blur();
        },
        // 关闭时间弹框
        editTime(){
            this.dialogTime = false
        },
        // 按天设置开关机时间段
        changeTime(event, classname) {
            var time = event;
            // console.log(event)
            if(time == null){
                time = '00:00'
            }
            var hour = Number(time.split(":")[0]) ;
            var min = Number(time.split(":")[1]);
            var mintime = hour*60 + min
            this.dayArr[classname] = mintime.toString()
            var state = 0
            for(var i = 1 ; i < this.dayArr.length; i++){
                if(state == 0){
                    var s = this.dayArr[i] == '' ? 0 : Number(this.dayArr[i])
                    var l = this.dayArr[i-1] == '' ? 0 : Number(this.dayArr[i-1])
                    if(l >= s){
                        this.dayArr[i] = ''
                        state = 1
                    }
                }else{
                    this.dayArr[i] = ''
                }
            }
            this.backTime()
        },
        //分钟回显时间
        backTime(){
            var choose = []
            for (let index = 0; index < this.dayArr.length; index++) {
                var settime = this.ChangeHourMinutestr(this.dayArr[index]);
                if (settime == "00:00") {
                    if (index == 0) {
                    choose.push(settime);
                    } else {
                    choose.push("");
                    }
                } else {
                    choose.push(settime);
                }
            }
            this.chooseDay = choose
            this.startTime1 = this.chooseDay[0]
            this.endTime1 = this.chooseDay[1]
            this.startTime2 = this.chooseDay[2]
            this.endTime2 = this.chooseDay[3]
            this.startTime3 = this.chooseDay[4]
            this.endTime3 = this.chooseDay[5]
        },
        //分钟转换为 00:00 格式
        ChangeHourMinutestr(minutes) {
            if(minutes == ''){
                return ''
            }else{
                let hours = Math.floor(minutes / 60);
                let mins = minutes % 60;

                // Add leading zeros if necessary
                hours = hours < 10 ? '0' + hours : hours.toString();
                mins = mins < 10 ? '0' + mins : mins.toString();

                return `${hours}:${mins}`;
            }
        },
        // 详细设置打开
        openSet(data,index){
            this.overviewSet = true
            this.overviewData = data
            this.overviewIndex = index
            //报警时间区间回显
            this.dayArr[0] = data.alarm1start.toString()
            this.dayArr[1] = data.alarm1end.toString()
            this.dayArr[2] = data.alarm2start.toString()
            this.dayArr[3] = data.alarm2end.toString()
            this.dayArr[4] = data.alarm3start.toString()
            this.dayArr[5] = data.alarm3end.toString()
            this.backTime()
        },
        getLayout8(){
            this.timeList = []
            this.$http
            .post(this.$baseUrl, {
                "getlayout":"layout8",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            })
            .then((res) => {
                if(res.data.layout8 == '-' || res.data.layout8 == ''){

                }else{
                    var str = {
                        value: -1,
                        label: '不限制'
                    }
                    this.timeList.push(str)
                    var timeArr = JSON.parse(res.data.layout8)['timeList']
                    for(var i = 0; i < timeArr.length; i++){
                        var arr = {
                            value: timeArr[i].uid.toString(),
                            label: timeArr[i].name
                        }
                        this.timeList.push(arr)
                    }
                }
            })
        },
        //时间模块选择赋值
        timeChange(val){
            this.overviewData.alarmareatime = val
        },
        // 获取所有数据
        getData(){
            var params = {
                "getdevinfo":[
                    {
                    "uid": this.type.uid,
                    "type": this.type.type,
                    "addr": this.type.addr
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            // 接口失败重复逻辑：3秒无返回认定接口失败，并重新访问接口，以上情况下接口循环访问达到5次后，接口循环重新访问时间延长到15秒一次，接口访问成功后该方法自动重置
            var size;
            this.timeErroData = setInterval(() => {
                if(this.sizenum >= this.repnum){ //达到3000ms延迟等待结果未返回
                    clearInterval(this.timeErroData); //清除定时器
                    this.timeErroData = null; //清除定时器
                    this.sizenum = 0 //时间计数重置
                    if(size == undefined){ //接口没有拿到返回
                        this.$message({
                            message: '服务器访问失败',
                            type: 'error',
                            duration: 1000
                        });
                        this.repeatnum++ //失败访问次数累计
                    if(this.repeatnum >= 4){ // 第五次接口访问失败后，接口访问频率改成15秒（12+3）
                        this.repnum = 15 //重复时间频率增大
                        this.getData()
                    }else{
                        this.getData() //重新访问接口
                    }
                    }else{
                        this.repeatnum = 0 //失败访问次数重置
                    }
                }else{
                    this.sizenum++; //时间累计
                }   
            }, 1000)
            // ---------
            this.$http.post(this.$baseUrl, params).then((res) => {
                // 接口失败重复逻辑相关
                size = res.data.getdevinfo;
                this.repnum = 3 //重复时间频率变回3000ms
                // -----------
                this.baseData = res.data.getdevinfo[0]
                var data = res.data.getdevinfo[0].unit
                var arr = {
                    name: this.baseData.name,
                    unit:[]
                }
                var str = {}
                for(var i = 0; i < data.length; i++){
                    console.log(data[i].alarmrecover)
                    str = {
                        id:data[i].id,
                        name:data[i].name,
                        ready:data[i].ready == 1 ? true : false,
                        flag:data[i].flag,
                        mult:data[i].mult,
                        min:data[i].min,
                        max:data[i].max,
                        recordtime:data[i].recordtime,//记录周期，单位秒
                        alarmlimit:data[i].alarmlimit,//权限，0-9级
                        alarmstate:data[i].alarmstate,//参数报警状态，0未报警，1报警，2忽略，3停用报警功能
                        alarmtime:data[i].alarmtime,//报警发生时间
                        alarmhighenable:data[i].alarmhighenable == 1 ? true : false,//报警高限触发使能，0禁用，1使能
                        alarmlowenable:data[i].alarmlowenable == 1 ? true : false,//报警低限触发使能，0禁用，1使能
                        alarmhhvalue:data[i].alarmhhvalue,//高高限触发值
                        alarmhvalue:data[i].alarmhvalue,//高限恢复值
                        alarmllvalue:data[i].alarmllvalue,//低低限触发值
                        alarmlvalue:data[i].alarmlvalue,//低限触发值
                        alarmhighname:data[i].alarmhighname,//高限报警名称
                        alarmlowname:data[i].alarmlowname,//低限报警名称
                        alarmareatime:data[i].alarmareatime,//报警触发时间段，-1没有指定时间区间，其余值为时间区间编号
                        alarmareatimename:data[i].alarmareatimename,//报警触发时间段名称
                        alarmrecover:data[i].alarmrecover == 0 ? true : false,//报警自动恢复设置，1自动恢复，0手动恢复
                        alarmdelay:data[i].alarmdelay == undefined ? 0 : data[i].alarmdelay,//报警触发延迟时间
                        // alarm1start:data[i].alarm1start == undefined ? 0 : data[i].alarm1start,
                        // alarm1end:data[i].alarm1end == undefined ? 0 : data[i].alarm1end,
                        // alarm2start:data[i].alarm2start == undefined ? 0 : data[i].alarm2start,
                        // alarm2end:data[i].alarm2end == undefined ? 0 : data[i].alarm2end,
                        // alarm3start:data[i].alarm3start == undefined ? 0 : data[i].alarm3start,
                        // alarm3end:data[i].alarm3end == undefined ? 0 : data[i].alarm3end,
                        // alarm1start:240,
                        // alarm1end:270,
                        // alarm2start:315,
                        // alarm2end:435,
                        // alarm3start:510,
                        // alarm3end:540,
                    }
                    arr.unit.push(str)
                }
                this.setData = arr
            })
        },
        changeName(value){
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.baseData.uid,
                        "type": this.baseData.type,
                        "addr": this.baseData.addr,
                        "name": value.toString()
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    
                }else{
                    this.$notify({
                        title: '保存失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        changeValue(index,data,dome){
            var str = {}
            if(dome == 'recordtime'){
                str = {
                    id:data.id,
                    recordtime:Number(data.recordtime),
                }
            }else if(dome == 'ready'){
                str = {
                    id:data.id,
                    ready:data.ready == true ? 1 : 0,
                }
            }else if(dome == 'name'){
                str = {
                    id:data.id,
                    name:data.name,
                }
            }else if(dome == 'flag'){
                str = {
                    id:data.id,
                    flag:data.flag,
                }
            }
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.baseData.uid,
                        "type": this.baseData.type,
                        "addr": this.baseData.addr,
                        "unit":[str]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    
                }else{
                    this.$notify({
                        title: '保存失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        // 报警使能点击下发
        alarmChangeh(val){
            var data = this.overviewData
            var str = {
                id:data.id,
                alarmhighenable:data.alarmhighenable == true ? 1 : 0,//报警高限触发使能，0禁用，1使能
            }
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.baseData.uid,
                        "type": this.baseData.type,
                        "addr": this.baseData.addr,
                        "unit":[str]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    if(val == false){
                        this.$notify({
                            title: '高限使能关闭成功',
                            type: 'success',
                            duration: 1500
                        });
                    }else{
                        this.$notify({
                            title: '高限使能开启成功',
                            type: 'success',
                            duration: 1500
                        });
                    }
                }else{
                    this.$notify({
                        title: '操作失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        alarmChangel(val){
            var data = this.overviewData
            var str = {
                id:data.id,
                alarmlowenable:data.alarmlowenable == true ? 1 : 0,//报警低限触发使能，0禁用，1使能
            }
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.baseData.uid,
                        "type": this.baseData.type,
                        "addr": this.baseData.addr,
                        "unit":[str]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    if(val == false){
                        this.$notify({
                            title: '低限使能关闭成功',
                            type: 'success',
                            duration: 1500
                        });
                    }else{
                        this.$notify({
                            title: '低限使能开启成功',
                            type: 'success',
                            duration: 1500
                        });
                    }
                }else{
                    this.$notify({
                        title: '操作失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        //显示高级设置
        tuozhan(){
            this.tuozhanShow = !this.tuozhanShow
            if(this.tuozhanShow){
                $('.oversetdiv_top_nr_warn').css('height',550+'px')
            }else{
                $('.oversetdiv_top_nr_warn').css('height',450+'px')
            }
        },
        validateInput(event) {
            let value = event.target.value;
            // 移除非数字字符和小数点
            value = value.replace(/[^0-9]/g, '');
            // 如果超过最大值，则设置为最大值
            if (parseInt(value, 10) > 9999) {
                value = '9999';
            }
            // 设置新的值到 v-model
            this.overviewData.alarmdelay = value;
        },
        numBlur(event){
            let value = event.target.value;
            // 移除非数字字符
            value = value.replace(/[^0-9]/g, '');
            // 如果为空字符串，设置为0
            if (!value) {
                // value = '0';
                this.overviewData.alarmdelay = 0
            }else{
                this.overviewData.alarmdelay = value
            }
        },
        //保存下发
        changeSave(){
            var data = this.overviewData
            var str = {
                id:data.id,
                mult:Number(data.mult),
                min:Number(data.min),
                max:Number(data.max),
                recordtime:Number(data.recordtime),//记录周期，单位秒
                alarmlimit:Number(data.alarmlimit),//权限，0-9级
                alarmstate:Number(data.alarmstate),//参数报警状态，0未报警，1报警，2忽略，3停用报警功能
                // alarmhighenable:data.alarmhighenable == true ? 1 : 0,//报警高限触发使能，0禁用，1使能   点击设置保存不发送报警使能，点击报警使能直接发送接口并弹框提示
                // alarmlowenable:data.alarmlowenable == true ? 1 : 0,//报警低限触发使能，0禁用，1使能
                alarmhhvalue:Number(data.alarmhhvalue),//高高限触发值
                alarmhvalue:Number(data.alarmhvalue),//高限恢复值
                alarmllvalue:Number(data.alarmllvalue),//低低限触发值
                alarmlvalue:Number(data.alarmlvalue),//低限触发值
                alarmhighname:data.alarmhighname,//高限报警名称
                alarmlowname:data.alarmlowname,//低限报警名称
                alarmareatime:Number(data.alarmareatime),//报警触发时间段，-1没有指定时间区间，其余值为时间区间编号
                // alarmareatime:-1,
                alarmrecover:Number(data.alarmrecover) == true ? 0 : 1,//报警自动恢复设置，1自动恢复，0手动恢复
                alarmdelay:Number(data.alarmdelay),//报警延时时间，单位秒
                // alarm1start:Number(this.dayArr[0]),
                // alarm1end:Number(this.dayArr[1]),
                // alarm2start:Number(this.dayArr[2]),
                // alarm2end:Number(this.dayArr[3]),
                // alarm3start:Number(this.dayArr[4]),
                // alarm3end:Number(this.dayArr[5]),
            }
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.baseData.uid,
                        "type": this.baseData.type,
                        "addr": this.baseData.addr,
                        "unit":[str]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    this.overviewSet = false
                    this.$notify({
                        title: '保存成功',
                        type: 'success',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '保存失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            });
        },
        // 弹框关闭回调
        overviewSetClose(){
            console.log('重新访问')
        },
        tishi1(){
            this.$alert('*若开启此功能，报警触发后需要手动恢复，请在报警列表中手动操作', {
                iconClass: 'el-icon-warning-outline',
                showConfirmButton:false
            });
        },
        tishi2(){
            this.$alert('*在指定时间段内报警功能生效，该时间段从【高级设置】→【时间模块】添加', {
                iconClass: 'el-icon-warning-outline',
                showConfirmButton:false
            });
        },
        tishi3(){
            this.$alert('*该等级只与报警账号等级关联，报警用户只能接收到同等级及以上等级的报警信息，等级越高获取的报警信息越少，如：9级报警用户收不到1~8级的报警信息', {
                iconClass: 'el-icon-warning-outline',
                showConfirmButton:false
            });
        }
    },
     // 清除定时器
     beforeDestroy() {
        console.log('清除定时器')
        // 停止循环接口
        clearInterval(this.timeErroData);
        this.timeErroData = null;
     }
}
</script>

<style scoped>

    .setoverview{
        color: #fff;
        height: 100%;
    }
    /deep/ .el-dialog__body{
        overflow: hidden;
        height: 95%;
        position: relative;
    }
    /deep/ .el-table th, /deep/  .el-table tr{
        /* background: #243848 !important; */
    background: rgb(95 121 152 / 100%) !important;

        /* background-color: transparent !important; */
        color: #fff;
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
        background: #4e6888;
    }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #4e6888;
    }
    /deep/ .el-table td, .el-table th.is-leaf{
        border-bottom: 1px solid #8591ad;
    }
    /deep/ .el-table tr th.is-leaf{
        border-bottom: 1px solid #4e6888;
    }
     /* 清除底部横线 */
    .el-table::before {
        height: 0px;
    }
    .set_title{
        font-size: 18px;
        margin-bottom: 10px;
        background: #4e68888c;
        text-indent: 20px;

    }
    /deep/ .set_title .el-input{
        width: auto;
        font-size: 18px;
    }
    /deep/ .set_title .el-input__inner {
        background: none !important;
        color: #fff;
        border: none;
        width: 590px;
        display: inline !important;
    }
    /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #030d23;
}
/deep/ .el-icon-edit{
    color: #fff;
}
/deep/ .set_title .el-input__prefix{
    left: -20px;
}
/deep/ .trans_input .el-input .el-input__inner{
    background: #454f612e !important;
    color: #fff;
    border: 1px solid #798baf;
}
/deep/ .el-table, .el-table__expanded-cell{
    background: none !important;
} 
/deep/ .el-dialog__headerbtn .el-dialog__close{
    color: #fff !important;
}
/deep/ .el-switch__core:after{
    top: 1.5px;
}
/* 外框flex布局 */
.set_wai{
    height: 95%;
    padding: 20px 30px;
    padding-right: 0px;
    /* overflow: hidden; */
    overflow-y: scroll;
    border: 1px solid #909dad;
}
.edit_tan{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000007a;
    top: 0px;
    left: 0;
    display: flex;
    /* align-items: center; */
    justify-content: center
}
.config_set{
    width: 1200px;
    height: 755px;
    background: #677591;
    position: relative;
    margin-top: 80px;
    padding: 35px 20px;
}
.set_flex{
    display: flex;
    /* justify-content: space-between; */
    overflow: hidden;
    overflow-y: scroll;
    flex-wrap: wrap;
    padding-right: 30px;
}
.set_flex_item{
    width: 400px;
    border: 1px solid #909dad82;
    margin-bottom: 30px;
    margin-right: 40px;
    padding: 15px 15px;
    background: #43516124;
    height: 160px;
    overflow: hidden;
}
/* .set_flex_item:nth-child(4n){
    margin-right: 0px;
} */
.set_flex_item_flex{
    display: flex;
    align-items: center;
}
.set_flex_item_flex2{
    width: 45%;
    display: flex;
    align-items: center;
}
.deviceset_title{
    width: 50px;
    color: #e5e5e5;
}
.deviceset_title2{
    width: 60px;
    color: #e5e5e5;
}
.deviceset_title3{
    width: 150px;
    color: #e5e5e5;
}
.trans_one{
    margin-bottom: 10px;
    padding-right: 10px;
}
.trans_two{
    padding-right: 10px;
    justify-content: space-between;
}
.set_flex_item_top{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.set_flex_item_set{
    background: rgba(89, 129, 165, 0.6);
    border: 1px solid rgba(89, 129, 165, 0.6);
    color: #fff;
}
/deep/ .el-dialog{
    position: relative;
    margin-top: 5vh !important;
    height: 88vh;
}
.oversetdiv{
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
    overflow-y: scroll;
}
.oversetdiv_top{
    height: 100px;
}
.oversetdiv_top_nr{
    padding: 10px 30px;
    background: #33404e17;
}
.oversetdiv_top_nr_warn{
    height: 450px;
    transition: height 1s;
    overflow: hidden;
    overflow-y: scroll;
}
.oversetdiv_title{
    height: 40px;
    background: #33404e17;
    line-height: 40px;
    padding-left: 20px;
}
.oversetdiv_title_ti{
    width: 120px;
    height: 32px;
    border-bottom: 1px solid #e2e2e2;
}
.set_flex_item_flex3{
    width: 200px;
    display: flex;
    align-items: center;
    padding-right: 30px;
    margin-right: 30px;
}
.deviceset_title4{
    width: 110px;
    color: #e5e5e5;
}
.oversetdiv_warn{
    /* height: 500px; */
    position: relative;
}
.oversetdiv_warn_hl{
    display: flex;
    width: 800px;
    height: 280px;
    margin-right: 30px;
    border: 1px solid #ffffff38;
    border-radius: 10px;
    padding: 20px;
}
.oversetdiv_warn_hl_echarts1{
    width: 60px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.oversetdiv_warn_hl_echarts2{
    width: 200px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.oversetdiv_warn_hl_echarts3{
    width: 210px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.oversetdiv_warn_hl_echarts2 img{
    width: 100%;
    height: auto;
}
.oversetdiv_warn_name{
    margin-left: 20px;
}

/deep/ .min_input .el-input .el-input__inner{
    width: 80px;
}
/deep/ .min_input2 .el-input .el-input__inner{
    width: 130px;
}
/deep/ .oversetdiv_warn_hl_echarts3 .el-input .el-input__inner{
    width: 100%;
}
.oversetdiv_warn_hl_item{
    width: 100%;
    margin-right: 20px;
    text-align: center;
}
.el-checkbox__input{}
.oversetdiv_warn_flex{
    display: flex;
    align-items: center;
}
.el-checkbox{
    color: #fff;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #2ee946;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #26cc3b;
    border-color: #26cc3b;
}
.deviceset_title5{
    width: 190px;
    padding-right: 5px;
    text-align: right;
    color: #e5e5e5;
}
.deviceset_title6{
    text-align: center;
    position: relative;
    top: -5px;
    color: #e5e5e5;
}
/* 高级设置 */
.tuozhan{
    margin-top: 20px;
    cursor: pointer;
}
.set_flex_item_warnjiben{
    margin-top: 10px;
    opacity: 0;
    transition: opacity .5s;
    /* display: flex; */
}
.set_flex_item_flex4{
    display: flex;
    align-items: center;
    padding-right: 30px;
    margin-bottom: 20px;
}
.deviceset_title7{
    min-width: 100px;
    color: #e5e5e5;
}
.deviceset_input{
    background: #454f612e !important;
    color: #fff;
    border: 1px solid #798baf;
    width: 100px;
    height: 40px;
    padding: 0 15px;
}
.set_fitem_tishi_icon{
    margin-left: 10px;
    font-size: 16px;
    cursor: pointer;
    color: #ccc;
}
.setover_but{
    /* float: right;
    margin-top: 20px;
    margin-right: 10px; */
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.set_flex_item_warntime{
    margin-top: 10px;
    display: flex;
}
.warntimep{
    margin-left: 10px;
}
/* 时间弹框 */
.config_delete{
    width: 800px;
    height: 500px;
    background: #677591;
    position: relative;
    margin-top: 150px;
}
.edit_close{
    position: absolute;
    top: 16px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    line-height: 28px;
}
.edit_title{
    background: #00000033;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    font-size: 18px
}
.config_delete_flex{
    height: 310px;
    overflow-y: scroll;
    margin-top: 30px;
    padding-left: 30px;
}
.set_flex_item_flex5{
    display: flex;
    align-items: center;
    padding-right: 30px;
    margin-bottom: 50px;
    margin-top: 30px;
}
.overview_settime{

}
.edit_but{
    width: 100%;
    height: 60px;
    text-align: right;
    margin-top: 40px;
}
.set_time{
    background: #ffffff0f;
    color: #fff;
    margin-left: 20px;
}
/* 媒体查询 */
/* 不同宽度下flex子模块宽度的区分 */
/* @media screen and (max-width: 1680px) {
    .set_flex_item{
        width: 350px;
    }
}
@media screen and (max-width: 1460px) {
    .oversetdiv_warn_hl_echarts{
        margin-bottom: 20px;
    }
    .set_flex_item{
        width: 400px;
    }
}
@media screen and (max-width: 1280px) {
    .set_flex_item{
        width: 380px;
    }
}
@media screen and (max-width: 1109px) {
    .set_flex_item{
        width: 340px;
    }
}
@media screen and (max-width: 1024px) {
    .set_flex_item{
        width: 310px;
    }
}
@media screen and (max-width: 945px) {
    .set_flex_item{
        width: 400px;
    }
} */
/* 不同高度下弹框高度的区分 */
/* @media screen and (max-height: 1150px) {
    .oversetdiv_top_nr_warn{
        height: 550px;
        overflow: hidden;
        overflow-y: scroll;
    }
}
@media screen and (max-height: 940px) {
    .oversetdiv_top_nr_warn{
        height: 450px;
        overflow: hidden;
        overflow-y: scroll;
    }
}
@media screen and (max-height: 820px) {
    .oversetdiv_top_nr_warn{
        height: 400px;
        overflow: hidden;
        overflow-y: scroll;
    }
} */
</style>